<template>
  <div>
    <h2>{{msg}}，学生姓名是：{{studentName}}</h2>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School class="demo" :getScName="getScName"/>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on -->
    <!-- <Student class="demo" @getStName="getStName"/> -->

    <!-- 通过父组件向子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
    <Student class="demo" ref="Student" @click.native="show"/>
    <!-- <Student class="demo" @getStName="getStName" @demo="m1"/> -->
  </div>
</template>

<script>
import School from './components/School';
import Student from './components/Student';
export default {
    data(){
        return {
            msg:'你好啊',
            studentName:''
        }
    },
    components:{
        School,
        Student
    },
    methods:{
      getScName(name){
        console.log('我是App，我获得了学校数据：',name)
      },
      getStName(name,...arr){
        console.log('我是App，我获得了学生数据：',name,arr.reduce((val,oldVal)=>val+=oldVal,0))
        this.studentName = name;
      },
      m1(){
        console.log('demo被触发了')
      },
      show(){
        console.log('show被触发');
      }
    },
    mounted(){
      /*
        该方法能够在指定需求时再绑定自定事件
        而第一种方式不能够在指定需求时绑定自定义事件
      */

      /*
        如果在$on中直接写了回调函数，那么执行时的this是$on绑定的那个组件，使用箭头函数才能够解决这个指向问题。
      */  
      // this.$refs.Student.$on('getStName',(name,...arr)=>{
      //   console.log('我是App，我获得了学生数据：',name,arr.reduce((val,oldVal)=>val+=oldVal,0))
      //   this.studentName = name;
      // })

      this.$refs.Student.$on('getStName',this.getStName)

      // this.$refs.Student.$once('getStName',this.getStName)
    }
}
</script>

<style scoped>
  .demo{
    color:seashell;
    padding: 10px;
    margin: 20px;
    letter-spacing: 2px;
  }
</style>